<%--
  Created by IntelliJ IDEA.
  User: 小袁啊
  Date: 2024/10/26
  Time: 下午4:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>盘点信息页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--门店搜索框--%>
    <el-form :inline="true" :model="branchFrom" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="branchFrom.branchId" placeholder="请选择分店" clearable>
                <el-option
                        v-for="aa in branchlist"
                        :label="aa.branchname"
                        :value="aa.branchid"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" >搜索</el-button>
        </el-form-item>
    </el-form>
    <%--全部信息--%>
    <template>
        <el-table
                border
                :data="invenInFo"
                style="width: 100%">
            <el-table-column
                    prop="invenid"
                    label="盘点编号">
            </el-table-column>
            <el-table-column
                    prop="staff.staffname"
                    label="盘点员工">
            </el-table-column>
            <el-table-column
                    prop="inventime"
                    label="盘点时间">
            </el-table-column>
            <el-table-column
                    prop="examstaffid"
                    label="审核员工id">
            </el-table-column>
            <el-table-column
                    prop="examstaff.staffname"
                    label="审核员工名称">
            </el-table-column>
            <el-table-column
                    prop="examtime"
                    label="审核时间">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="审核状态">
                <template slot-scope="scope">
                    <el-tag
                            v-if="scope.row.state==2"
                            type="success">
                        审核通过
                    </el-tag>
                    <el-tag
                            v-else-if="scope.row.state==1"
                            type="warning">
                        等待审核
                    </el-tag>
                    <el-tag
                            v-else
                            type="danger">
                        审核驳回
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="驳回原因">
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                    @click="xiangxixinxi(scope.row)"
                    >
                        详细信息
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <%--分页 --%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
<%--详细信息对话框+++++++++++++++++++++===========================================================--%>
        <el-dialog title="详细信息对话框" :visible.sync="editDialogFormVisible" width="40%">
            <el-table
                    :data="xiangxiform"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="lid"
                        label="报损编号id">
                </el-table-column>
                <el-table-column
                        prop="goods.goodsname"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        prop="invennum"
                        label="盘点数量">
                </el-table-column>
                <el-table-column
                        prop="lossnum"
                        label="报损数目">
                </el-table-column>
            </el-table>
        </el-dialog>
    </template>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            invenInFo: [],//显示所有盘点信息
            branchFrom:{},//门店搜索框提交表单
            branchlist: [],//搜索门店数据
            xiangxiform: {},//详细信息的表单对象
            editDialogFormVisible: false,//详细信息对话框显示隐藏
        },
        //自启动
        created() {
            this.loadInvenList();//加载盘点信息
            this.loadBranchList();//加载分店列表
        },
        //方法
        methods: {
            //加载分店列表
            loadBranchList() {
                axios.get("/branch/getBranchName").then(resp => {
                    this.branchlist = resp.data.data;
                })
            },
            //详细信息
            xiangxixinxi(row) {
                axios.get("/inventory/getInventoryById?invenid=" + row.invenid).then(resp => {
                    //console.log(resp);
                    this.xiangxiform = resp.data.data;
                    this.editDialogFormVisible = true;
                })
            },
            //加载盘点信息
            loadInvenList() {
                axios.post("/inventory/listInventory?currentPage="+this.currentPage +
                    "&pageSize=" + this.pageSize,this.branchFrom).then(resp => {
                    //console.log(resp);
                    this.invenInFo = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            // 每页数据条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadInvenList();
            },
            // 页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadInvenList();
            },
            // 搜索
            onSubmit() {
                this.loadInvenList();
            },
        }
    })
</script>
</html>
